<span page-title ng-model="syncPlan">{{ 'Sync Plan:' | translate }} {{ syncPlan.name }}</span>

<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2>{{ syncPlan.name }}</h2>
  </header>

  <div data-block="messages">
    <div bst-alert="info" ng-show="task">
      <span translate>
        A sync has been initiated in the background, <a href="/foreman_tasks/tasks/{{ task.id }}">click for more details</a>
      </span>
    </div>
  </div>

  <nav data-block="item-actions" bst-feature-flag="custom_products">
    <span select-action-dropdown>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
        <li role="menuitem" ng-hide="denied('sync_sync_plans')">
          <a ng-click="runSyncPlan()">
            <span translate>Run Sync Plan</span>
          </a>
        </li>

        <li class="divider" ng-hide="denied('destroy_sync_plans')"></li>

        <li role="menuitem" ng-hide="denied('destroy_sync_plans', syncPlan)">
          <a ng-click="openModal()">
            <span translate>Remove</span>
          </a>
        </li>
      </ul>
      
      <div bst-modal="removeSyncPlan(syncPlan)" model="syncPlan">
        <div data-block="modal-header" translate>Remove Sync Plan "{{ syncPlan.name }}"?</div>
        <div data-block="modal-body" translate>Are you sure you want to remove Sync Plan "{{ syncPlan.name }}"?</div>
      </div>
    </span>
  </nav>

  <nav data-block="navigation">
    <ul class="nav nav-tabs details-nav">
      <li ng-class="{active: stateIncludes('sync-plan.info')}">
        <a translate
           ui-sref="sync-plan.info({syncPlanId: syncPlan.id})">
          Details
        </a>
      </li>
      <li ng-class="{active: stateIncludes('sync-plan.products')}">
        <a translate
           ui-sref="sync-plan.products.list({syncPlanId: syncPlan.id})">
          Products
        </a>
      </li>
      <li ng-repeat="menuItem in menuExpander.getMenu('syncPlan')">
        <a href="{{ menuItem.url }}">
          {{ menuItem.label }}
        </a>
      </li>
    </ul>
  </nav>


  <div data-block="content">
    <section ui-view></section>
  </div>
</div>
